<template>
  <div class="essays-page">
    <h1>AI 随笔</h1>
    <div class="articles">
      <div v-for="article in articles" :key="article.id" class="article">
        <h2>{{ article.title }}</h2>
        <p>{{ article.content }}</p>
        <div class="author">作者: {{ article.author }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

interface Article {
  id: number
  title: string
  content: string
  author: string
}

const articles = ref<Article[]>([
  {
    id: 1,
    title: 'AI 在医疗领域的应用',
    content: '人工智能正在改变医疗行业，从诊断到个性化治疗，AI 提供了更高效和准确的解决方案。',
    author: '李华'
  },
  {
    id: 2,
    title: '机器学习的未来',
    content: '随着数据量的增加和计算能力的提升，机器学习将在更多领域发挥重要作用。',
    author: '王强'
  },
  {
    id: 3,
    title: '深度学习的突破',
    content: '深度学习在图像识别、自然语言处理等领域取得了显著进展，推动了 AI 的快速发展。',
    author: '张伟'
  }
])
</script>

<style scoped>
.essays-page {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
  text-align: left;

  h1 {
    font-size: 2rem;
    margin-bottom: 20px;
    text-align: center;
  }

  .articles {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .article {
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: #f9f9f9;

    h2 {
      font-size: 1.5rem;
      margin-bottom: 10px;
    }

    p {
      font-size: 1rem;
      color: #666;
      margin-bottom: 10px;
    }

    .author {
      font-size: 0.9rem;
      color: #999;
      text-align: right;
    }
  }
}
</style> 